<template>
	<view class="menus">
		<view class="top">
			<view class="top1">
				<view class="image" @click="personal">
					<image src="../../static/img/index1.png" mode=""></image>
				</view>
				<view class="online">
					下线中
				</view>
				<view class="image" @click="inform">
					<image src="../../static/img/index2.png" mode=""></image>
				</view>
			</view>
			<view class="top2">
				<view class="num">
					<view class="dan">
						<view class="ber">
							0
						</view>
						<view class="liang">
							单
						</view>
					</view>
					<view class="over">
						今日完成单
					</view>
				</view>
				<view class="num1">
					<view class="dan">
						<view class="ber">
							0
						</view>
						<view class="liang">
							元
						</view>
					</view>
					<view class="over">
						今日总收入
					</view>
				</view>
				<view class="right" @click="statistics">
					<image src="../../static/right(2).png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="list1" @click="single">
				<image src="../../static/img/index_icon04.png" mode=""></image>
				<view class="">
					待抢订单
				</view>
			</view>
			<view class="list1" @click="map">
				<image src="../../static/img/index_icon05.png" mode=""></image>
				<view class="">
					待抢地图
				</view>
			</view>
			<view class="list1" @click="orderType">
				<image src="../../static/img/index_icon06.png" mode=""></image>
				<view class="">
					接单设置
				</view>
			</view>
			<view class="list1" @click="record">
				<image src="../../static/img/index_icon03.png" mode=""></image>
				<view class="">
					抢单记录
				</view>
			</view>
		</view>
		<view class="ordering">
			<view class="order">
				<view class="ing">
					进行中订单
				</view>
				<view class="refresh" :style="{transform:`rotate(${zhi}deg)`}" @click="rotate(180)">
					<image src="../../static/refresh.png" mode=""></image>
				</view>
			</view>
			<view class="line"></view>
			<view class="content">
				<image src="../../static/img/no-order.png" mode=""></image>
				<view class="">
					您目前没有进行中的订单
				</view>
				<view class="">
					快去接单吧~
				</view>
			</view>
		</view>
		<view class="location">
			<image class="img1" src="../../static/img/location.png" mode=""></image>
			<view style="width: 68%;padding-left: 10rpx;padding-right: 10rpx;">
				广州市人民政府（府前路1号市政府大院）
			</view>
			<image class="img2" src="../../static/refresh(1).png" mode="" :style="{transform:`rotate(${zhi1}deg)`}"  @click="rotate1(360)"></image>
			<view class="con">
				刷新
			</view>
		</view>
	</view>
</template>

<script>
import {menu,menu1,menu2,menu3,menu4,refresh1,refresh2} from '../../models/axios.js'
	export default {
		name:"menus",
		data() {
			return {
				zhi:0,
				zhi1:0,
			};
		},
		created() {
			this.menus()
			this.menus1()
			this.menus2()
			this.menus3()
			this.menus4()
		},
		methods: {
			async menus(){
				let data={}
				let res=await menu(data)
				// console.log(res)
			},
			async menus1(){
				let data={}
				let res=await menu1(data)
				// console.log(res)
			},
			async menus2(){
				let data={}
				let res=await menu2(data)
				// console.log(res)
			},
			async menus3(){
				let data={}
				let res=await menu3(data)
				// console.log(res)
			},
			async menus4(){
				let data={}
				let res=await menu4(data)
				// console.log(res)
			},
			async rotate(zhi){
				this.zhi+=zhi;
				let data={};
				let res=await refresh(data);
				// console.log(res)
			},
			async rotate1(zhi1){
				this.zhi1+=zhi1;
				let data={};
				let res=await refresh1(data);
				// let data1={};
				// let res1=await refresh2(data1);
				console.log(res)
				// console.log(res1)
			},
			inform(){
				uni.navigateTo({
					url: "/pages/index/inform"
				})
			},
			personal(){
				uni.navigateTo({
					url: "/pages/index/personal"
				})
			},
			single(){
				uni.navigateTo({
					url: "/pages/index/single"
				})
			},
			orderType(){
				uni.navigateTo({
					url: "/pages/index/orderType"
				})
			},
			record(){
				uni.navigateTo({
					url: "/pages/index/record"
				})
			},
			statistics(){
				uni.navigateTo({
					url: "/pages/index/statistics"
				})
			},
			map(){
				uni.navigateTo({
					url: "/pages/index/map"
				})
			},
		}
	};
</script>

<style scoped>
	.menus{
		background: rgb(238,238,238);
		height: 1250rpx;
	}
	.top{
		/* background: rgb(51,198,232); */
		background-image: url(../../static/img/bg.jpg);
		background-size: 100% 235px;
		width: 100%;
		height: 400rpx;
	}
	.top1{
		display: flex;
		flex-direction: row;
	}
	.online{
		background: rgb(9,107,242);
		color: #ffff;
		border-radius: 50rpx;
		width: 25%;
		padding: 18rpx;
		text-align: center;
		margin: 100rpx auto;
		margin-left: 140rpx;
		margin-right: 140rpx;
		margin-bottom: 30rpx;
	}
	.image{
		margin: 100rpx auto;
		margin-bottom: 30rpx;
	}
	.image image{
		width: 60rpx;
		height: 60rpx;
	}
	.top2{
		display: flex;
		flex-direction: row;
		color: #ffff;
		align-items: center;
		justify-content: space-around;
	}
	.num{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 22%;
	}
	.dan{
		display: flex;
		flex-direction: row;
	}
	.ber{
		    font-size: 50rpx;
	}
	.liang{
		padding-top: 20rpx;
		padding-left: 8rpx;
	}
	.over{
		padding-top: 10rpx;
	}
	.num1{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 10rpx;
	}
	.list{
		display: flex;
		flex-direction: row;
		width: 95%;
		padding: 18rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 4rpx;
		margin-top: -50rpx;
		box-shadow: 0px 1px 7px #888888;
	}
	.list1{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0 auto;
	}
	.list1 image{
		width: 100rpx;
		height: 100rpx;
	}
	.list1 view{
		font-size: 30rpx;
	}
	.ordering{
		width: 90%;
		height: 500rpx;
		background: #FFFFFF;
		margin: 30rpx auto;
		border-radius: 4rpx;
		box-shadow: 0px 1px 7px #888888;
	}
	.order{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 40rpx;
		padding-top: 20rpx;
		padding-bottom: 10rpx;
	}
	.ing{
		font-size: 30rpx;
	}
	.refresh{
		padding-top: 4px;
		transition: all 1s;
	}
	.refresh image{
		width: 30rpx;
		height: 30rpx;
	}
	.line{
		width: 100%;
		height: 2rpx;
		border-top: 2rpx;
		background: #888888;
	}
	.content{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 72rpx;
		color: rgb(205,205,205);
	}
	.content image{
		width: 160rpx;
		height: 160rpx;
	}
	.location{
		display: flex;
		flex-direction: row;
		width: 90%;
		padding: 10rpx;
		margin: 30rpx auto;
		margin-top: 72rpx;
		background: #FFFFFF;
		border-radius: 4rpx;
		box-shadow: 0px 1px 7px #888888;
		align-items: center;
	}
	.img1{
		width: 50rpx;
		height: 50rpx;
	}
	.img1{
		width: 50rpx;
		height: 50rpx;
	}
	.img2{
		width: 60rpx;
		height: 60rpx;
		transition: all 1s;
	}
	.con{
		color: red;
		font-size: 40rpx;
	}
	/* .right{
		margin-right: 12%;
	} */
	.right image{
		width: 70rpx;
		height: 70rpx;
	}
</style>
